<template>
    <div class="top">
        <h3><span>丨</span>基础采收信息</h3>
        <div style="text-align:right;margin-top:20px;">
            <el-button @click="backHandler" class="back">返回</el-button>
        </div>
    </div>
    <el-card class="box-card">
        <div><b>选择块地:</b>{{ formData1.rc }}</div>
        <div><b>块地作物:</b>{{ formData1.rd }}</div>
        <div><b>采收人:</b>{{ formData1.realname }}</div>
        <div><b>计划采收时间:</b>{{ formData1.rb }}</div>
    </el-card>
    <div class="two">
        <div>
            <h3><span>丨</span>计划采收量</h3>
            <el-card class="box-card">
                <div><b>采收量:</b>{{ formData1.re }}</div>
            </el-card>
        </div>
        <div>
            <h3><span>丨</span>实际采收量</h3>
            <el-card class="box-card">
                <div><b>采收量:</b>{{ formData1.re }}</div>
            </el-card>
        </div>
    </div>
</template>

<script lang='ts' setup>
import type { IUserTableItem1 } from '@/interfaces/IUser';
import { reactive } from 'vue';
import { watch } from 'vue';
import { inject } from 'vue';
import router from '@/router';
import { useNewOrdersStore0 } from '@/stores/NewOrdersStore';
const newOrdersStore0 = useNewOrdersStore0();
import { useNewOrdersStore } from '@/stores/NewOrdersStore';
const newOrdersStore = useNewOrdersStore();
const props = defineProps<{ checkRow: IUserTableItem1 | null, }>()

const originFormData1: any = {

    rc: '',
    rd: '',
    realname: '',
    rb: '',
    re: '',
}

const formData1 = reactive({ ...newOrdersStore0.orderPlans0[0] })
watch(() => props.checkRow, (val) => {
    if (val) {
        Object.assign(formData1, val)
    }
}, { immediate: true })


const currentView = inject('currentView');
const backHandler = () => {
    if (currentView && typeof currentView === 'object' && 'value' in currentView) {
        // currentView.value = 'recordlist';
         newOrdersStore.xs = true;
         router.push('/orders');
    }
}

</script>

<style lang='scss' scoped>
.el-form {
    margin: 20px 200px;
}

.el-input {
    width: 300px;
}

h3 {
    margin-bottom: 20px;
    color: white;
}

span {
    color: #52e1dc;
}

.el-card {
    background-color: #132E3F;
    border: 0;
    div {
        margin: 20px 300px;
        font-size: 20px;
         color: #368B90;
        font-size: 16px;
    }
}

.two {
    display: flex;
    justify-content: space-between;

    .el-card {
        width: 620px;

        div {
            margin: 0 50px;
            font-size: 20px;
        }
    }
}

.top {
     width: 100%;
    display: flex;
    justify-content: space-between;

    .back {
        background-color: rgb(84, 84, 129);
        color: white;
        width: 85px;
        height: 40px;
    }
}
.el-button{
    background-color: #1E4D58 !important;
    color: #4BC6C7;
    border: 0;
}
b{
    color: white;
    margin-right: 10px;
}

</style>